<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/jq/jquery.js"></script>
</head>

<body>
    <input type="button" value="ajax" onclick="sendAjax()">
    <input type="button" value="ajax" onclick="sendAjax2()">

    <input type="button" value="ajax" onclick="sendAjax4()">
    <script>

        /*  
            jqXHR.done(function(data, textStatus, jqXHR) {});
                一个可供选择的 success 回调选项的构造函数。
            jqXHR.fail(function(jqXHR, textStatus, errorThrown) {});
                一种可供选择的 error 回调选项的构造函数。
            jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { });
                一种可供选择的 complete 回调选项的构造函数。
            jqXHR.then(
                    function(data, textStatus, jqXHR) {}, 
                    function(jqXHR, textStatus, errorThrown) {}
                );
            包含了 .done() 和 .fail()方法的功能 
            
        */


        function sendAjax() {
            // $.ajax({
            //     url:"/jquery/test",
            //     success:function(data){
            //         console.log(data);
            //     },
            //     error:function(){
            //         console.log("请求失败");
            //     },
            //     complete:function(){
            //         console.log("请求完成");
            //     }
            // });

            $.ajax({
                url: "/jquery/test2"
            }).done(function (data) {
                console.log(data);
            }).fail(function () {
                console.log("请求失败");
            }).always(function () {
                console.log("请求完成");
            });
        }

        function sendAjax2() {
            $.ajax({
                url: "/jquery/test2"
            }).promise()
                .then(function (data) {
                    console.log(data);
                }).catch(function (e) {
                    console.log("--------------");
                    console.log(e);
                });
        }

        function sendAjax3() {
            $.ajax({ url: "/jquery/test3" }).promise()
            .then(function (data) {
                console.log(data);
            }).catch(function (e) {
                console.log("--------------");
                console.log(e);
            });
           

            $.ajax({url: "/jquery/test" }).promise()
            .then(function (data) {
                console.log(data);
            }).catch(function (e) {
                console.log("--------------");
                console.log(e);
            });
                
           
        }

        async function sendAjax4() {
            try {
                let result = await $.ajax({ url: "/jquery/test3" }).promise();
                console.log(result);
                let result2 = await $.ajax({ url: "/jquery/test"}).promise();
                console.log(result2);
            } catch (e) {
                console.log(e);
            }
        }


    </script>
</body>

</html>